<script setup>
import { useStore } from 'vuex';

const store = useStore()
const carousel = ref()
const initialIndex = ref(0)
const isShow = ref(false)
const index = ref(0)

store.dispatch('homepage/updateBannerList')
store.dispatch('homepage/updateHeadList')
store.dispatch('homepage/updateNewGoods')
store.dispatch('homepage/updataPopularList')
store.dispatch('homepage/updateHotList')
store.dispatch('homepage/updateGoodsList')
store.dispatch('homepage/updateSpecialList')
// 获取首页列表
const homeList = computed(() => store.state.homepage.homeList)
// 获取轮播图列表
const bannerList = computed(() => store.state.homepage.bannerList)
// 获取新鲜好物推荐
const newGoodsList = computed(() => store.state.homepage.newGoodsList)
// 获取人气推荐数据
const popularList = computed(() => store.state.homepage.popularList)
// 获取热门品牌数据
const hotList = computed(() => store.state.homepage.hotList)
// 获取商品列表
const goodsList = computed(() => store.state.homepage.goodsList)
// 获取专题精选数据
const specialList = computed(() => store.state.homepage.specialList)

const prev = () => {
  carousel.value.prev()
  initialIndex.value = 0
}
const next = () => {
  carousel.value.next()
  initialIndex.value = 1
}

function onMouseenter(i) {
  isShow.value = true
  index.value = i
}
const onMouseout = () => { isShow.value = false }
</script>

<template>
  <main>
    <!-- 头部轮播 -->
    <div class="header">
      <div class="wapper">
        <div class="main-header">
          <el-carousel height="500px">
            <el-carousel-item
              v-for="(item, i) in bannerList"
              :key="i">
              <el-image style="width: 100%; height: 100%" :src="item.imgUrl" />
            </el-carousel-item>
          </el-carousel>
          <div class="main-nav">
            <ul>
              <li
                v-for="(item, i) in homeList"
                :key="i"
                @mouseenter="onMouseenter(item.id)"
                @mouseleave="onMouseout"
              >
              {{ item.name}}
              <a>{{ item.children[0].name }}</a>
              <a>{{ item.children[1]?.name }}</a>
              </li>
            </ul>
            <div class="main-right" :class="{show: isShow}">
              <div class="right-title">
                分类推荐<span>根据您的购买或浏览记录推荐</span>
              </div>
              <div class="right-goods">
                <div
                  v-for="(item, i) in homeList"
                  :key="i"
                  class="right-item"
                  :class="{active: index === item.id}"
                >
                  <div
                    v-for="goods in item.goods"
                    :key="goods.id"
                    class="goods-item"
                  >
                  <el-image style="width: 95px; height: 95px" :src="goods.picture" />
                  <div class="goods-text">
                    <div>{{ goods.name }}</div>
                    <div class="desc">{{ goods.desc }}</div>
                    <div class="price">￥{{ goods.price }}</div>
                  </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新鲜毫无 人气推荐 -->
    <div class="wapper">
      <div class="new">
        <div class="nav">
          <h1>新鲜好物</h1>
          <div class="nav-right">
            <span>新鲜出炉 品质靠谱</span>
            <span>查看全部<el-icon><ArrowRight /></el-icon></span>
          </div>
        </div>
        <div class="new-goods goods-show">
          <div
            v-for="item in newGoodsList"
            :key="item.id"
          >
            <el-image style="width: 306px; height: 306px" :src="item.picture"/>
            <span>{{ item.name }}</span>
            <span>￥{{ item.price }}</span>
          </div>
        </div>
      </div>
      <div class="popular">
        <div class="nav">
          <h1>人气推荐</h1>
          <div class="nav-right">
            <span>人气爆款 不容错过</span>
          </div>
        </div>
        <div class="popular-goods goods-show">
          <div
            v-for="item in popularList"
            :key="item.id"
          >
            <el-image style="width: 306px; height: 306px" :src="item.picture"/>
            <span>{{ item.title }}</span>
            <span>{{ item.alt }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 热门品牌 -->
    <div class="hot">
      <div class="wapper">
        <div class="nav">
          <h1>热门品牌</h1>
          <div class="nav-right">
            <span>国际经典 品质保证</span>
            <div class="change">
              <el-button
                size="small"
                :disabled="initialIndex === 0"
                @click="prev"
                :class="initialIndex === 0 ? 'c' :''"><el-icon color="#fff"><ArrowLeft /></el-icon></el-button>
              <el-button
                size="small"
                :disabled="initialIndex === 1"
                @click="next"
                :class="initialIndex === 1 ? 'c' :''"><el-icon color="#fff"><ArrowRight /></el-icon></el-button>
            </div>
          </div>
        </div>
        <el-carousel
          indicator-position="outside"
          arrow="never"
          ref="carousel"
        >
          <el-carousel-item>
            <div class="hot-pic">
              <el-image
                style="width: 240px; height: 305px"
                v-for="item in hotList.slice(0, 5)"
                :key="item.id"
                :src="item.picture"
              ></el-image>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="hot-pic">
              <el-image
                style="width: 240px; height: 305px"
                v-for="item in hotList.slice(5, 10)"
                :key="item.id"
                :src="item.picture"
              ></el-image>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 居家 -->
    <div class="wapper">
      <div
          class="goods"
          v-for="item in goodsList"
          :key="item.id"
        >
        <div class="goods-nav"
        >
          <h1>{{ item.name }}</h1>
          <div class="nav-right">
            <div
            >
              <span
                v-for="x in item.children"
                :key="x.id"
              >{{ x.name }}</span>
            </div>
            <span>查看全部<el-icon><ArrowRight /></el-icon></span>
          </div>
        </div>
        <div class="goods-pic">
          <div class="goods-left">
            <el-image
                style="width: 204px; height: 700px"
                :src="item.picture"
                fit="cover"
              ></el-image>
              <div class="goods-title">
                <span>{{ item.name}}</span>
                <span>{{ item.saleInfo}}</span>
              </div>
          </div>
          <div class="goods-right">
            <div
              class="goods-right-wapper"
              v-for="x in item.goods"
              :key="x.id"
            >
              <div
                class="goods-item"
              >
                <el-image
                  style="width: 204px; height: 204px"
                  :src="x.picture"
                  fit="cover"
                ></el-image>
                <span>{{ x.name }}</span>
                <span>{{ x.desc }}</span>
                <span>￥{{ x.price }}</span>
              </div>
              <div class="goods-popups">
                <span>找相似</span>
                <div class="roll"></div>
                <span>发现更多宝贝></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 最新专题 -->
    <div class="border-special">
      <div class="wapper special">
        <div class="nav">
          <h1>最新专题</h1>
          <span>全看全部></span>
        </div>
        <div class="special-content">
          <div class="content-item"
          v-for="item in specialList"
          :key="item.id"
          >
            <div class="image-wapper">
              <el-image
                style="width: 400px; height: 306px"
                :src="item.cover"
                fit="cover"
              ></el-image>
              <div class="special-title">
                <div>{{ item.title }}</div>
                <div>{{ item.summary }}</div>
              </div>
            </div>
            <span class="price">￥{{ item.lowestPrice }}起</span>
            <div class="special-footer">
            <div>
              <span><el-icon><CircleCheck /></el-icon>{{ item.replyNum}}</span>
              <span><el-icon><View /></el-icon>{{ item.viewNum}}</span>
            </div>
            <span><el-icon><ChatDotSquare /></el-icon>{{ item.collectNum }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<style lang="scss" scope>
  //
  .goods-show {
    display: flex;
    justify-content: space-around;
    div {
      width: 306px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      span {
        padding: 0 25px;
        margin-top: 10px;
        font-size: 20px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        &:last-child {
          font-size: 22px;
        }
      }
    }
  }

  main {
    width: 100%;
    .header {
        width: 100%;
        background-color: #F5F5F5;
    }
    .wapper {
      width: 1240px;
      margin: 0 auto;
      .el-carousel__item h3 {
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
        text-align: center;
      }


      .main-header {
        position: relative;
        .el-carousel__arrow--left {
            left: 270px;
        }
        .main-nav {
          width: 250px;
          background: rgba(0,0,0,.8);
          height: 500px;
          position: absolute;
          top: 0;
          ul {
            margin: 0;
            padding: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            li {
              padding: 10px 0 10px 40px;
              height: 100%;
              display: flex;
              align-items: center;
              list-style: none;
              color: #fff;
              a {
                text-decoration: none;
                color: #fff;
                font-size: 12px;
                margin: 5px;
                margin-bottom: 0;
              }
              &:hover {
                background-color: #27ba9b;
              }
            }
          }
        }
        .main-right {
          width: 990px;
          height: 500px;
          display: none;
          position: absolute;
          top: 0;
          left: 250px;
          background: hsla(0,0%,100%,.8);
          padding: 20px 15px;
          box-sizing: border-box;
          .right-title {
            font-size: 20px;
            span {
              font-size: 14px;
              color: #aaa;
              margin-left: 10px;
            }
          }
          .right-goods {
            display: grid;
            position: relative;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            grid-gap: 20px;
            background-color: #fff;
            .right-item {
              opacity: 0;
              position: absolute;
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              grid-template-rows: repeat(3, 1fr);
              .goods-item {
                width: 308px;
                padding: 10px;
                display: flex;
                box-sizing: border-box;
                .goods-text {
                  width: 180px
                }
              }
            }
            .price {
              font-size: 20px;
              color: #cf4444;
            }
            .desc {
              width: 180px;
              font-size: 14px;
              color: #aaa;
              // 溢出隐藏
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .active {
              opacity: 1;
            }
          }
        }
        .show {
          display: block;
        }
      }

      .nav {
        padding: 20px;
        display: flex;
        align-items: flex-end;
        h1 {
          margin: 0;
          font-weight: 500;
          margin-right: 10px;
        }
        .nav-right {
          width: 86%;
          display: flex;
          justify-content: space-between;
        }
      }

      .new-goods {
        div {
          background-color: #f0f9f4;
          span {
            &:last-child {
              color: #cf4444;
            }
          }
        }
      }
      .popular-goods {
        div {
          span {
            &:last-child {
              font-size: 16px;
              color: #ccc;
            }
          }
        }
      }
    }
    .hot {
      background-color: #F5F5F5;
      .hot-pic {
        display: flex;
        justify-content: space-around;
      }
      .change {
        .el-button {
          margin-right: 5px;
          background-color: #27ba9b;
        }
        .c {
          background-color: #ccc;
        }
      }
    }
    .goods {
      .goods-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .nav-right {
          display: flex;
          div {
            display: flex;
            margin-right: 60px;
            span {
              color: black;
              margin-right: 10px;
              border-radius: 4px;
              &:hover {
                background-color: #27ba9b;
              }
            }
          }
          span {
            padding: 2px 10px;
            color: #ccc;
          }
        }
      }
      .goods-left {
        position: relative;
        .goods-title {
          display: flex;
          width: 188px;
          height: 66px;
          line-height: 66px;
          position: absolute;
          top: 50%;
          span {
            text-align: center;
            height: 66px;
            color: #fff;
            display: inline-block;
            width: 76px;
            background: rgba(0,0,0,.9);
            &:last-child {
              width: 112px;
              font-size: 12px;
              background: rgba(0,0,0,.7)
            }
          }
        }
      }
      .goods-pic {
        display: flex;
        justify-content: space-between;
        .goods-left {
          width: 204px;
          height: 700px;
          margin-right: 20px;
        }
        .goods-right {
          width: 100%;
          overflow: hidden;
          box-sizing: border-box;
          // gird布局 两列 两行 每行四个
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: repeat(2, 1fr);
          grid-gap: 20px;
          .goods-right-wapper {
            position: relative;
            width: 240px;
            box-sizing: border-box;
            padding: 10px 15px;
              &:hover {
                outline: 1px solid #27ba9b;
                .goods-popups {
                  padding: 5px 70px;
                  height: 80px;
                }
              }
            .goods-item {
              height: 300px;
              margin-bottom: 20px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              span {
                &:first-child {
                  display: block;
                  width: 100%;
                  height: 100%;
                }
                &:nth-child(2) {
                  font-size: 16px;
                  font-weight: 500;
                  margin-top: 10px;
                }
                &:nth-child(3) {
                  // 超出隐藏
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  color: #ccc;
                  margin-top: 10px;
                }
                &:last-child {
                  font-size: 18px;
                  font-weight: 500;
                  color: #cf4444;
                  margin-top: 10px;
                }
              }
            }
          }
          .goods-popups {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 0;
            width: 100%;
            box-sizing: border-box;
            padding: 0 70px;
            text-align: center;
            background-color: #27ba9b;
            transition: all .5s;
            span {
              color: #fff;
              font-size: 12px;
            }
            .roll {
              width: 150px;
              height: 1px;
              margin: 10px 0;
              background-color: #fff;
            }
          }
        }
      }
    }
    .border-special {
      .special {
        .nav {
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            color: #ccc;
          }
        }

        .special-content {
          height: 288px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(1, 1fr);
          grid-gap: 20px;
          position: relative;
          .content-item{
            position: relative;
            .special-title {
              position: absolute;
              bottom: 90px;
              div {
                &:first-child {
                  width: 300px;
                  font-size: 22px;
                  font-weight: 500;
                  color: #fff;
                  // 溢出隐藏
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                width: 300px;
                font-size: 18px;
                color: #ccc;
                // 溢出隐藏
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .special-footer {
              height: 72px;
              display: flex;
              justify-content: space-between;
              padding: 0 10px;
              align-items: center;
              font-size: 18px;
              span {
                margin: 0 10px;
                display: flex;
                align-items: center;
              }
              div {
                display: flex;
              }
            }
            .price {
              font-size: 20px;
              color: #cf4444;
              position: absolute;
              right: 0;
              bottom: 95px;
              background-color: #fff;
              padding: 0 5px;
            }
          }
        }
      }
      height: 495px;
      background-color: #f5f5f5;
    }
  }


</style>
